<template>
    <div>
        <Header :user="user"/>
        <!--登陆注册-->
        <div class="login_registered" v-if="user.username == null">
            <div class="login" @click="dialogVisible = true">
                即刻登录
            </div>
            <div class="registered" @click="reg_dialogVisible = true">
                马上注册
            </div>
        </div>
        <!--商品页-->
        <!--    中间栏-->
        <div class="center_menu">
            <!--轮播图-->
            <div class="block text-center">
                <el-carousel height="150px">
                    <el-carousel-item v-for="item in carousel" :key="item">
                        <h3 class="small justify-center" text="2xl">{{ item.name }}</h3>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <!--商品-->
            <div class="commodity">
                <div class="on_by_one">
                    <div class='food' v-for="(item, index) in foods" :key="index" @click="addShoppingCart(index)">
                        <img :src="this.serviceIp + item.pic" :alt='item.name' class='food_img'/>
                        <div class='food_detail'>
                            <p class='food_name'>{{ item.name }}</p>
                            <p class='food_price'>￥{{ item.price }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--    登录-->
        <el-dialog
            v-model="dialogVisible"
            title="登录"
            width="30%"
            :before-close="handleClose">
            <el-form :model="login_form" label-width="120px">
                <el-form-item label="用户名">
                    <el-input v-model="login_form.login" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="login_form.password" style="width: 80%;"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">我不想登录</el-button>
            <el-button type="primary" @click="login">我要登陆</el-button>
        </span>
            </template>
        </el-dialog>
        <!--    注册-->
        <el-dialog
            v-model="reg_dialogVisible"
            title="注册"
            width="30%"
            :before-close="regClose">
            <el-form :model="reg_form" :rules="rules" label-width="120px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="reg_form.username" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="登入账号" prop="login">
                    <el-input v-model="reg_form.login" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="reg_form.password" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <div>
                        <el-radio-group v-model="reg_form.sex" size="medium">
                            <el-radio-button label="未知"></el-radio-button>
                            <el-radio-button label="男"></el-radio-button>
                            <el-radio-button label="女"></el-radio-button>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="reg_form.address" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phoneNumber">
                    <el-input v-model="reg_form.phoneNumber" style="width: 80%;"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
        <span class="dialog-footer">
            <el-button @click="regClose">我不想注册</el-button>
            <el-button type="primary" @click="register">我要注册</el-button>
        </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import Header from "@/components/Header";
import axios from "axios";

import '@/assets/css/commodity.css'
import request from "@/utils/request";

export default {
    name: "HomeView",
    components: {
        Header
    },
    data() {
        return {
            serviceIp: "http://localhost:9090/file/foods/",
            user: {},
            foods: [],
            login_form: {},
            reg_form: {},
            dialogVisible: false,
            reg_dialogVisible: false,
            token: '',
            remark: '',
            completeAll: true,
            carousel: [
                {
                    name: "第一张图：我不知道要放什么",
                },
                {
                    name: "第二张图：我不知道要放什么",
                },
                {
                    name: "第三张图：我不知道要放什么",
                },
                {
                    name: "第四张图：我不知道要放什么",
                },
                {
                    name: "第五张图：我不知道要放什么",
                }
            ],
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                login: [
                    {required: true, message: '请输入登入账号', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},
                ],
                sex: [
                    {required: true, message: '请选择性别', trigger: 'blur'},
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'},
                ],
                phoneNumber: [
                    {required: true, message: '请输入电话号', trigger: 'blur'},
                ],
            },
        }
    },
    created() {
        //加载数据获取用户
        this.load();
        this.getUser();
    },
    watch() {
    },
    methods: {
        //获取localStorage中的用户
        getUser() {
            if (localStorage.getItem("access-user") != null) {
                this.user = JSON.parse(localStorage.getItem("access-user")).user;
                this.token = JSON.parse(localStorage.getItem("access-user")).token;
            }
        },
        //添加购物车方法
        addShoppingCart(index) {
            if (localStorage.getItem("access-user") != null) {
                this.token = JSON.parse(localStorage.getItem("access-user")).token;
            }
            if (this.user != null) {
                request.get("/addShopCart", {
                    params: {
                        uId: this.user.id,
                        id: this.foods[index].id,
                        name: this.foods[index].name,
                        price: this.foods[index].price,
                        remark: this.remark,
                        token: this.token
                    }
                }).then(res => {
                    if (res.message === "成功") {
                        this.$message({
                            type: "success",
                            message: "已添加到购物车内"
                        })
                    } else {
                        this.$message({
                            type: "error",
                            message: "购物车内已有此商品"
                        })
                    }
                })
            } else {
                this.$message({
                    type: "message",
                    message: "登录添加购物车"
                })
                this.dialogVisible = true;
            }
        },
        //加载数据，分页查询
        load() {
            request.get("/foods", {
                params: {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    search: this.search
                }
            }).then(res => {
                this.foods = res.foods;
                // this.total = res.data.total;
            })
        },
        //登录
        login() {
            request.post("/login", this.login_form).then(res => {
                console.log(res)
                if (res.message === "成功") {
                    this.$message({
                        type: "success",
                        message: "登陆成功，欢迎你" + res.user.user.username
                    })
                    localStorage.setItem("access-user", JSON.stringify(res.user));
                    //res是user+token的对象，需要从中取出每部分的内容
                    this.user = res.user.user;
                    this.dialogVisible = false;
                } else {
                    this.$message({
                        type: "error",
                        message: "登陆失败，账号或密码错误"
                    })
                }
            })
        },
        //注册账号
        register() {
            request.post("/register", this.reg_form).then(res => {
                if (res != null) {
                    this.$message({
                        type: "success",
                        message: "注册成功"
                    })
                    //关闭注册床窗口
                    this.reg_dialogVisible = false;
                    //打开登陆窗口
                    this.dialogVisible = true;
                } else {
                    this.$message({
                        type: "error",
                        message: "注册失败"
                    })
                }
            })
        },
        regClose() {
            this.$message({
                type: "success",
                message: "真的不考虑注册一个吗？？？"
            })
            this.reg_dialogVisible = false;
            this.reg_form = {};
        }
    }
}
</script>
